<template>
    <div class="app-container" ref="container">
        <div class="overf" style="overflow: hidden;">
            <div class="wrapper" style="overflow:auto;height: 100%;">
                <hot-table
                    ref="hotTableComponent"
                    :settings="settings"
                    :columns="columns"
                    :col-headers="colHeaders"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { HotTable } from '@handsontable-pro/vue'
// eslint-disable-next-line
import Handsontable from 'handsontable-pro'

export default {
    components: {
        HotTable
    },
    props: {
        formId: String,
        commonPlaceholder: '',
        filterData: Object,
        settings: Object,
        columns: Array,
        colHeaders: Array,
        heightGrade: Array,
        trueTableDate: Array
    },
    data() {
        return {
            tableHeight: 800,
            tableWidth: 1000
        }
    },
    watch: {
        trueTableDate(val) {
            console.log(val)
            this.loadData(val)
        }
    },
    mounted() {
        console.log(this.$refs.container)
        this.initial()
        window.addEventListener('resize', this.initial())
    },
    created() {
        // this.fetchData()

    },
    methods: {
        getSourceData: () => {
            return this.$refs.hotTableComponent.table.getSourceData()
        },
        loadData(data) {
            // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
            this.$refs.hotTableComponent.hotInstance.loadData(data)
        },
        getCvs() {
            this.$refs.hotTableComponent.hotInstance.getPlugin('exportFile').downloadFile('csv', { filename: 'Handsontable CSV Export example' })
        },
        initial() {
            this.tableHeight = this.$refs.container.clientHeight - 50
            this.tableWidth = this.$refs.container.clientWidth
            this.$refs.hotTableComponent.hotInstance.updateSettings({
                height: this.tableHeight,
                width: this.tableWidth
            })
            this.loadData(this.trueTableDate)
        }
    }
}
</script>
